<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>天天生鲜-商品列表</title>
 <link rel="shortcut icon" href="images/copylogo.png">
 <link rel="stylesheet" href="css/reset.css">
 <link rel="stylesheet" href="css/main.css">
 <link rel="stylesheet" href="css/main1.css">
 <link rel="stylesheet" href="css/goods.css">
 
</head>

<body>
<div id="header">
<div class="header_con">
   	<div class="header">
   		<div class="welcome fl">欢迎来到天天生鲜</div>
   		<div class="fr">
           	<div class="login_info fl" v-if="onlogin">
           		<a href="">欢迎: <b>{{loginName}}</b></a>
               	<span>|</span>
               	<a href="register.html">注册</a>
            </div>
            <div class="login_btn fl" v-else>
               	<a href="login.html">登录</a>
                   <span> | </span>
                   <a href="register.html">注册</a>
            </div>
           	 <div class="user_link fl">
                   <span> | </span>
                   <a href="#">用户中心</a>
                   <span> | </span>
                   <a href="#">我的购物车</a>
                   <span> | </span>
                   <a href="#">我的订单</a>
          		 </div> 
            </div>  
   	</div>
   </div>
</div>
    <!-- 搜素框 -->
<div class="search_bar clearfix">
   <a href="index.html" class="logo fl"><img src="images/logo.png"></a>
   <div class="search_con fl">
       <input type="text" placeholder="搜素商品" name="" class="input_text fl">
       <input type="button" value="搜索" class="input_btn fr">
   </div>
   <div class="guest_cart fr">
       <a href="" class="cart_name fl">我的购物车</a>
       <div class="goods_count fl" id="show_count">1</div>
   </div>
</div>

<!-- 全部商品分类 --> 
<div class="navbar_con">
	<div class="navbar clearfix">
    	<!-- 动态下拉框 -->
		<div class="subnav_con fl">
        	<h1 class="fl">全商品分类</h1>
        	<span></span>
            <ul class="subnav">
                <li><a href="#model01" class="fruit">新鲜水果</a></li>
                <li><a href="#" class="sealfood">海鲜水产</a></li>
                <li><a href="#" class="meet">猪牛羊肉</a></li>
                <li><a href="#" class="egg">禽类蛋品</a></li>
                <li><a href="#" class="vegetables">新鲜蔬菜</a></li>
                <li><a href="#" class="ice">速冻食品</a></li>
        	</ul>
        </div>
		<ul class="navlist fl">
			<li><a href="index.html">首页</a></li>
            <li class="interval">|</li>
            <li><a href="">手机生鲜</a></li>
            <li class="interval">|</li>
            <li><a href="">抽奖</a></li>
		</ul>
	</div>
</div>

<!-- 面包屑导航 --> 
<div id="app">
<div class="breadcrumb" id="breadcrumb">
 	<a href="javascript:void(0)">全部分类</a>
    <span>&gt;</span>
    <a href="javascript:void(0)">{{typeName}}</a>
 </div>
 
 <!-- 商品展示区域-->
<div class="main_wrap clearfix">
	<!-- 新品推荐 -->
   <div class="l_wrap fl clearfix">
   	<div class="new_goods">
       	<h3>新品推荐</h3>
       	<ul>
           	<li>
               	<a href="#"><img src="images/goods/goods003.jpg"></a>
                   <h4><a href="#">牛奶草莓</a></h4>
                   <div class="prize">￥16.80</div>
               </li>
           	<li>
               	<a href="#"><img src="images/goods/goods009.jpg"></a>
                    <h4><a href="#">海南帝王蕉</a></h4>
                   <div class="prize">￥99.00</div>
               </li>
           </ul>
       </div>
   </div>
   <!-- 热门类型查询 -->
    <div class="r_wrap fr clearfix">
    	<div class="sort_bar">
        	<a href="javascript:void(0);" id="normal" class="type active">默认</a>
            <a href="javascript:void(0);" id="price" class="type ">价格</a>
            <a href="javascript:void(0);" id="manUse" class="type ">人气</a>
        </div>
    	<ul class="goods_type_list clearfix">
      		<li v-for="good in goods">
                <a :href="'detail.html?' + good.gno + '&' + typeName" target="_blank"><img :src="'../' + good.pic"></a>
                <h4><a :href="'detail.html?' + good.gno + '&' + typeName" target="_blank">{{good.gname}}</a></h4>
                <div class="operate">
                	<span class="prize">&yen;{{good.price}}</span>
                    <span class="unit">{{good.weight}}/{{good.unit}}</span>
                    <a href="#" class="add_goods" title="加入购物车"></a>
                </div>
            </li>
        </ul>
     </div>
 <!-- 分页栏-->
	<div class="pagenation">
		<ul>
			<li v-for="i in total">
				<a href="javascript:void(0)" class="active" v-if="i == pageNo" @click="findByPage(i)">{{i}}</a>
				<a href="javascript:void(0)" @click="findByPage(i)" v-else>{{i}}</a>
			</li>
		</ul>
	</div>
  </div>
 </div>
 <!-- 版权所有 -->
<div class="footer">
	<div class="foot_link">
    	<a href="#">关于我们</a> <span> | </span>
        <a href="#">联系我们</a> <span> | </span>
        <a href="#">招聘广告</a> <span> | </span>
        <a href="#">友情链接</a>
    </div>
	<p>CopyRight &copy; 2019 衡阳市源辰信息科技有限公司 All Rights Reserverd</p>
    <p>电话：0734-8355998 湘ICP备16015987号</p>
</div>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript" src="js/qs.js"></script>
<script type="text/javascript" src="js/checklogin.js"></script>
<script type="text/javascript">
var tno;
var page = 1;
var rows = 10;

let app = new Vue({
	el:"#app",
	data:{
		typeName:"",
		goods: [],
		total: 0,  //总页数
		pageNo: 1  //当前页数
	},
	mounted: function(){
		var param = decodeURI(location.search.replace("?",""));
		if(param == "" || param.indexOf("&") <= 0){
			location.href = "index.html";
			return;
		}
		param = param.split("&");
		tno = param[0];
		this.typeName = param[1];
		axios.post("goods/findByFirst", qs.stringify({tno: tno, page: page, rows: rows})).then(rt => {
			if(rt.status == 200 && rt.data.code == 200){
				this.goods = rt.data.data.rows;
				this.total = Math.ceil(rt.data.data.total / rows);
			}
		})
	},
	methods: {
		findByPage: function(idx){
			page = idx;
			this.pageNo = idx;
			axios.post("goods/findByPage",qs.stringify({tno: tno, page: page, rows: rows})).then(rt =>{
				if(rt.status == 200 && rt.data.code == 200){
					this.goods = rt.data.data;
				}
			})
		}
	}
})
</script>
</body>
</html>
